
import React from 'react'

class WorkDetail extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentWillReceiveProps(props) {
    this.setState({
      data: props.data
    })
  }

  pad(n) {
    return n < 10 ? "0"+n : n;
  }

  renderImages() {
    var self = this
    var content = []
    var host = self.props.config.publicHost
    if (self.props.data && self.props.data.wechat_assets
    && self.props.data.wechat_assets.length > 0) {
      self.props.data.wechat_assets.forEach(function(asset) {
        if (asset.type == 'image') {
          content.push((
            <div className="work-image">
              <img src={host+asset.url}/>
            </div>
          ))
        }
      })
    }
    return content
  }

  renderAudios() {
    var self = this
    var content = []
    var host = self.props.config.publicHost
    if (self.props.data && self.props.data.wechat_assets
    && self.props.data.wechat_assets.length > 0) {
      self.props.data.wechat_assets.forEach(function(asset) {
        if (asset.type == 'audio') {
          content.push((
            <div className="work-audio">
              <audio controls="controls" preload="auto">
                <source src={host+asset.url}  type="audio/mpeg" />
              </audio>
            </div>
          ))
        }
      })
    }
    return content
  }

  render() {
    var self = this;
    var order_number, unit_desc, owner, mobile, content, time, public_area
    if (self.props.data) {
      order_number = self.props.data.jde_order_number || ""
      unit_desc = self.props.data.unit?self.props.data.unit.unit_desc:""
      owner = self.props.data.owner
      mobile = self.props.data.mobile
      content = self.props.data.content
      public_area = self.props.data.public_area || ""
      var created_at = new Date(self.props.data.created_at)
      time = created_at.getFullYear() +"/" +self.pad(created_at.getMonth()+1) + "/"
                  + self.pad(created_at.getDate()) + " " + self.pad(created_at.getHours())
                  + ":"+self.pad(created_at.getMinutes())
    }

    return (
      <div className="modal fade work-detail" id="work-detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="WechatUser-modal-label">{"报修详情"+order_number}</h4>
            </div>
            <div className="modal-body">
              <div className="panel panel-default">
                <div className="panel-heading">业主信息</div>
                <div className="panel-body">
                  <div className="form-group">
                    <label for="workUnit">户号</label>
                    <input ref="workUnit" type="text" className="form-control"
                            id="workUnit" placeholder="户号" value={unit_desc}
                            disabled/>
                  </div>
                  <div className="form-group">
                    <label for="workUnit">公共区域</label>
                    <input ref="workUnit" type="text" className="form-control"
                            id="workUnit" placeholder="公共区域" value={public_area}
                            disabled/>
                  </div>
                  <div className="form-group">
                    <label for="workUnit">联系人</label>
                    <input ref="workUnit" type="text" className="form-control"
                            id="workUnit" placeholder="联系人" value={owner}
                            disabled/>
                  </div>
                  <div className="form-group">
                    <label for="workUnit">联系电话</label>
                    <input ref="workUnit" type="text" className="form-control"
                            id="workUnit" placeholder="联系电话" value={mobile}
                            disabled/>
                  </div>
                  <div className="form-group">
                    <label for="workUnit">报修时间</label>
                    <input ref="workUnit" type="text" className="form-control"
                            id="workUnit" placeholder="报修时间" value={time}
                            disabled/>
                  </div>

                </div>
              </div>
              <div className="panel panel-default work-panel">
                <div className="panel-heading">报修信息</div>
                <div className="panel-body">
                  <div className="form-group">
                    <label for="workUnit">描述</label>
                    <textarea ref="workUnit" type="text" className="form-control"
                            id="workUnit" placeholder="描述" value={content}
                            disabled/>
                  </div>
                  <div>
                    {self.renderImages()}
                  </div>
                  <div>
                    {self.renderAudios()}
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    )
  }
}

export default WorkDetail
